<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
	  			xmlns:p="http://primefaces.org/ui"
				template="/WEB-INF/layouts/standard.xhtml">
<ui:define name="notes">
	<p>
		Check the calendar widget and the tooltips on the credit card fields.
		The form uses Ajax-based validations to redisplay server-side errors without refreshing the entire page.
		The booking bean backing the form is a flow-scoped object (see <strong>booking-flow.xml</strong>).		
	</p>
</ui:define>
<ui:define name="content">
	<h:form id="bookingForm">
		<p:fieldset legend="Hotel Reservation Form">
			<p:messages />
			<div class="large">
				${booking.hotel.name},
				${booking.hotel.address}
				${booking.hotel.city}, ${booking.hotel.state}, ${booking.hotel.zip}
				${booking.hotel.country}
			</div>
			<hr/>
			<div>
				<div class="span-4 label">
					<h:outputLabel for="price">Nightly Rate:</h:outputLabel>
				</div>
				<div class="span-14 last">
					<p>
						<h:outputText id="price" value="#{booking.hotel.price}">
							<f:convertNumber type="currency" currencySymbol="$"/>
						</h:outputText>
					</p>
				</div>					
			</div>
			<div class="field">
				<div class="span-4">
					<h:outputLabel for="checkinDate">Check In:</h:outputLabel>
				</div>
				<div class="span-5">
					<p>
						<p:calendar id="checkinDate" label="Check in date" 
							value="#{booking.checkinDate}" pattern="MM-dd-yyyy" required="true" />
	               	</p>
				</div>
				<div class="span-4">
					<h:outputLabel for="checkoutDate">Check Out:</h:outputLabel>
				</div>
				<div class="span-5 last">
					<p>
						<p:calendar id="checkoutDate" label="Check out date" 
							value="#{booking.checkoutDate}" pattern="MM-dd-yyyy" required="true" />
					</p>
				</div>
			</div>
			<div class="field">
				<div class="span-4">
					<h:outputLabel for="beds">Room Preference:</h:outputLabel>
				</div>
				<div class="span-5">
					<p>
						<h:selectOneMenu id="beds" value="#{booking.beds}">
							<f:selectItems value="#{referenceData.bedOptions}"/>
						</h:selectOneMenu>
					</p>	
				</div>
				<div class="span-4">
					<h:outputLabel for="smoking">Smoking:</h:outputLabel>
				</div>
				<div id="radio" class="span-5 last">
					<h:selectOneRadio id="smoking" value="#{booking.smoking}" layout="pageDirection">
						<f:selectItems value="#{referenceData.smokingOptions}"/>
					</h:selectOneRadio>
				</div>
			</div>
			<!-- 
			The "amenities" section commented out due to the following issue:
			
			https://issues.apache.org/jira/browse/MYFACES-2739
			https://javaserverfaces-spec-public.dev.java.net/issues/show_bug.cgi?id=817
			https://javaserverfaces.dev.java.net/issues/show_bug.cgi?id=1694
			
			<div class="field">
				<div class="span-4">
					<h:outputLabel for="amenities">Amenities:</h:outputLabel>
				</div>
				<div class="span-11 last">
					<h:selectManyCheckbox id="amenities" value="#{booking.amenities}" layout="pageDirection">
						<f:selectItem itemValue="OCEAN_VIEW" itemLabel="Ocean View" />
						<f:selectItem itemValue="LATE_CHECKOUT" itemLabel="Late Checkout" />
						<f:selectItem itemValue="MINIBAR" itemLabel="Minibar" />
					</h:selectManyCheckbox>
				</div>
			</div>

			-->
			<div class="field">
				<div class="span-4">
					<h:outputLabel for="creditCard">Credit Card Number:</h:outputLabel>
				</div>
				<div class="span-5">
					<p>
						<h:inputText id="creditCard" label="Credit card number" value="#{booking.creditCard}" />
					</p>
				</div>
				<div class="span-4">
					<h:outputLabel for="creditCardName">Credit Card Name:</h:outputLabel>
				</div>
				<div class="span-5 last">
					<p>
						<h:inputText id="creditCardName" label="Credit card name" value="#{booking.creditCardName}"/>
					</p>
				</div>
			</div>
			<div class="field">
				<div class="span-4">
					<h:outputLabel for="creditCardExpiryMonth">Expiration Date:</h:outputLabel>
				</div>
				<div class="span-14 last">
					<p>
						<h:selectOneMenu id="creditCardExpiryMonth" value="#{booking.creditCardExpiryMonth}">
							<f:selectItems value="#{referenceData.creditCardExpMonths}" />
						</h:selectOneMenu>&nbsp;
						<h:selectOneMenu id="creditCardExpiryYear" value="#{booking.creditCardExpiryYear}">
							<f:selectItems value="#{referenceData.creditCardExpYears}"/>
						</h:selectOneMenu>
					</p>
				</div>
			</div>
			<div>
				<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
			</div>
			<div>
				<p:commandButton id="proceed" action="proceed" value="Proceed" update="@form" />
				<p:commandButton id="cancel" value="Cancel" action="cancel" immediate="true" />
			</div>		
		</p:fieldset>
	</h:form>
</ui:define>
</ui:composition>